page {
    background: #fff !important;
}

.ball {
    // background: radial-gradient(circle at center,  #4d94f741, #f1f1f1);
    background: radial-gradient(circle at center, #e0eafa, #fff);
    width: 450px;
    height: 450px;
    box-shadow: 0 0 50px 0 #fff inset;
    transform : translate(-100px, 50px);
}

.loading-spiner{
    width: 190px;
    height: 190px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid #ddd !important;
    transform: translate(-50%,-50%);
    animation: loading linear 2s infinite;

    &::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        width: 20px;
        height: 20px;
        background: #972c2a;
        border-radius: 50%;
        transform: translate(-50%,-50%);
    }
}

@keyframes loading{

    0%{
        transform: translate(-50%,-50%) rotate(0deg);
    }
   100%{
        transform: translate(-50%,-50%) rotate(360deg);
    }

}